<template>
    <i class="h-icon" :class="{
        [`h-icon--${type}`]: type
    }" :style="colorStyle">
        <FontAwesomeIcon v-bind="omitProps" />
    </i>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { omit } from "lodash";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import type { IconProps } from './types'

const props = defineProps<IconProps>()
const omitProps = omit(props, ['type', 'color'])
console.log(omitProps);

const colorStyle = computed(() => props.color ? { 'color': props.color } : {})


</script>

<style scoped>
@import url(./style.css);
</style>